<template>
	<view class="address-list">
		<!-- 地址列表 -->
		<view class="address-item" v-for="(item, i) in addressList" :key="item.id" @click="onSelect(item)">
			<!-- 选择按钮 -->
			<view class="check-area">
				<radio :checked="item.id === chosenAddressId" color="#e74c3c" />
			</view>

			<!-- 地址信息 -->
			<view class="address-info">
				<view class="top-row">
					<text class="name">{{ item.name }}</text>
					<text class="tel">{{ item.tel }}</text>
					<text class="default-tag" v-if="item.isDefault">默认</text>
				</view>
				<view class="address-text">
					{{ item.province || '' }}{{ item.city || '' }}{{ item.county || '' }}{{ item.addressDetail || '' }}
				</view>
			</view>

			<!-- 编辑按钮 -->
			<view class="edit-btn" @click.stop="onEdit(item.id)">
				<text>编辑</text>
			</view>
		</view>

		<!-- 无地址提示 -->
		<view class="empty-tip" v-if="addressList.length === 0">
			暂无收货地址
		</view>

		<!-- 添加地址按钮 -->
		<button class="add-btn" @click="onAdd">+添加地址</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chosenAddressId: '', // 选中的地址ID
				addressList: [] // 地址列表
			};
		},
		onLoad(options) {
			// 初始化：从参数或本地存储获取选中ID
			this.chosenAddressId = options.addressId || uni.getStorageSync('chosenAddressId') || '';
			this.loadAddressList();
		},
		onShow() {
			// 页面显示时刷新数据（移除$forceUpdate，改用重新赋值触发视图更新）
			const storedList = uni.getStorageSync('addressList') || [];
			this.addressList = [...storedList]; // 解构赋值触发视图更新
			this.chosenAddressId = uni.getStorageSync('chosenAddressId') || '';
			this.syncDefaultAddress();
		},
		methods: {
			// 加载地址列表并同步默认地址
			loadAddressList() {
				const storedList = uni.getStorageSync('addressList') || [];
				this.addressList = [...storedList];
				this.syncDefaultAddress();
			},

			// 同步默认地址到选中状态
			syncDefaultAddress() {
				if (!this.chosenAddressId) {
					const defaultAddr = this.addressList.find(item => item.isDefault);
					if (defaultAddr) {
						this.chosenAddressId = defaultAddr.id;
						uni.setStorageSync('chosenAddressId', defaultAddr.id);
					}
				}
			},

			// 选择地址
			onSelect(item) {
				// 切换选中状态
				this.chosenAddressId = item.id === this.chosenAddressId ? '' : item.id;
				// 保存到本地存储
				uni.setStorageSync('chosenAddressId', this.chosenAddressId);
				// 通知其他页面
				uni.$emit('addressChanged', {
					addressId: this.chosenAddressId,
					addressInfo: this.chosenAddressId ? item : null
				});
				// 从其他页面跳转时返回
				if (this.$route?.params?.addressId) {
					uni.navigateBack({
						delta: 1
					});
				}
			},

			// 编辑地址
			onEdit(id) {
				uni.navigateTo({
					url: `/pages/address/addressEdit?id=${id}`
				});
			},

			// 添加地址
			onAdd() {
				uni.navigateTo({
					url: '/pages/address/addressEdit?id=new'
				});
			}
		}
	};
</script>

<style scoped>
	.address-list {
		min-height: 100vh;
		background-color: #f4f4f4;
		padding: 15px;
	}

	.address-item {
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		border: 1px solid #e0e0e0;
	}

	.check-area {
		padding: 5px 10px 0 0;
	}

	.address-info {
		flex: 1;
	}

	.top-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 5px;
	}

	.name {
		font-weight: bold;
		color: #333;
		margin-right: 15px;
	}

	.tel {
		color: #777;
		margin-right: 15px;
	}

	.default-tag {
		background-color: #e74c3c;
		color: #fff;
		font-size: 12px;
		padding: 2px 5px;
		border-radius: 3px;
	}

	.address-text {
		color: #333;
		font-size: 14px;
		line-height: 1.5;
	}

	.edit-btn {
		padding: 5px 0 0 10px;
		color: #e74c3c;
		font-size: 14px;
	}

	.empty-tip {
		text-align: center;
		padding: 30px;
		color: #777;
		background-color: #fff;
		border-radius: 8px;
	}

	.add-btn {
		width: 100%;
		background-color: #fff;
		color: #e74c3c;
		border: 1px dashed #e74c3c;
		border-radius: 8px;
		padding: 12px;
		margin-top: 10px;
		font-size: 16px;
	}
</style>